<template>
  <div class="home-page">
    <div class="banner">
      <div>
        <h1 class="hos-title">{{organInfo.hospName}}</h1>
      </div>
    </div>
    <div class="container page">
      <div class="cardNo">
        您的工号
      </div>
      <div>
        <input class="staffInput" @blur="getStaffInfo" :class="[{'redAlert':staffExist==2}]" v-model="input" placeholder="请准确填写您的工号"></input>
      </div>
      <div class="tipInfo" v-if="staffExist ==0">{{tipinfo}}</div>
      <div v-if='staffExist ==2' :class="[{'redAlert':staffExist==2}]" class="tipInfo">
        {{staffExist==2 && organInfo.hospName + NoStaffInfo}}
      </div>
      <div v-if="staffExist==1" class="staffDetail">
        <ul>
          <li><span class="info">所属医院</span><span class='data'>{{staffInfo.hospName}}</span></li>
          <li><span class="info">姓名</span><span class='data'>{{staffInfo.staffName}}({{staffInfo.id}})</span></li>
          <li><span class="info">科室</span><span class='data'>{{staffInfo.deptName}}</span></li>
          <li><span class="info">岗位类别</span><span class='data'>{{staffInfo.postName}}</span></li>
        </ul>
      </div>
      <div v-if='staffExist ==1' class="tipInfo">
        {{findStaffInfo}}
      </div>
      <div :class="[{'active':staffExist ==1}]" class="bottomBtn"  @click="bindStaffInfo">
        <div>提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/common/api.service";
export default {
  name: "home",
  data() {
    return {
      organInfo: {},
      staffInfo:{},
      staffExist: 0,
      tipinfo: '提示：为了确保您是医院的职工，我们需要您的工号进行验证，请不要向其他人告知透露您的工号，我们会保证您的隐私问题。',
      findStaffInfo: '提示：您的个人信息如果正确的话，点击下方提交按钮开始健康打开，若个人信息异常，请确认您的工号是否正确，或者联系信息科。',
      NoStaffInfo: '后台数据库找不到您的信息，请确认您的工号，或者联系信息科',
      input:''
    };
  },
  created() {
    this.getOrganInfo();
  },
  computed: {},
  methods: {
    getOrganInfo() {
      var _that = this;
      api.post("hospitalService/getHospitalByHospCode?hospCode=" + this.$route.query.organId).then(function(json){
        if(json.data.success) {
          _that.organInfo = json.data.data;
           localStorage.setItem('organInfo', JSON.stringify(json.data.data))
        } else {
          _that.$message({
          message: '获取机构信息失败'
        });
        }
      })
    },
    getStaffInfo() {
      var _that = this;
      api.post("staffService/getStaffByStaffCode?staffCode=" + this.input).then(function(json){
        if(json.data.success) {
          _that.staffExist = 1;
          _that.staffInfo = json.data.data;
          localStorage.setItem('staffInfo', JSON.stringify(json.data.data));
        } else {
          _that.staffExist = 2;
        //   _that.$message({
        //   // message: '获取机构信息失败'
        // });
        }
      })
    },
    bindStaffInfo() {
      this.$router.push({
                path: '/Clockin',
                query: {
                    staffId:this.input                    
                }
            })
      // var _that = this;
      // api.post("staffService/bindWeChat?staffCode=" + this.input).then(function(json){
      //   if(json.data.success) {
      //     _that.staffExist = 1;
      //     _that.staffInfo = json.data.data;
      //   } else {
      //     _that.staffExist = 2;
      //   //   _that.$message({
      //   //   // message: '获取机构信息失败'
      //   // });
      //   }
      // })
    }
  }
};
</script>
<style>
.staffDetail{
  background-color: #F8F8FF;
}
.staffDetail ul{
  list-style: none;
  padding:0px;
}
.staffDetail ul li{
  padding:10px;
}
.staffDetail ul li .info{
  color:#BEBEC2;
}
.staffDetail ul li .data{
  color:#333;
  position: absolute;
  right: 50px;
}
.staffInput{
      width: 100%;
    height: 35px;
    background-color: #F8F8FF;
    box-shadow: none;
    text-shadow: none;
    border: none;
}
.bottomBtn {
    padding: 0 40px;
    height: 40px;
    border-radius: 40px;
    background-color: #CBCCCB;
    position: absolute;
    bottom: 20px;
    /* width: 100%; */
    left: 15px;
    right: 15px;
    text-align: center;
    line-height: 40px;
    color: #fff;
}
.bottomBtn.active{
  background-color: #4D4DFD;
}
.redAlert input {
  /* text-align:right; */
  color:#F26445;
}
.tipInfo {
    color: #A9AAA9;
    font-size: 12px;
    padding: 10px 0px;
}
.redAlert {
  color:#F26445;
}
.container {
  padding: 15px;
}
.cardNo {
  padding:5px 0px;
}
.home-page .hos-title {
  text-align: center;
}
</style>
